<template>
	<div class="blog-list-body-box">
		<div class="call-back-icon-box">
			<el-tooltip class="item" effect="light" content="返回主页" placement="top">
				<i class="el-icon-sunny my-el-icon" @click="callBackhome"></i>
			</el-tooltip>
		</div>
		<div class="search-box">
			<el-input placeholder="请输入文章标题" v-model="input" clearable @keyup.enter.native="searchBlog"
				class="serarch-assembly search-input">
			</el-input>
			<el-button type="primary" icon="el-icon-search" class="serarch-assembly search-btn" @click="searchBlog">搜索
			</el-button>
			<el-button type="primary" icon="el-icon-edit" class="serarch-assembly writ-an-article-btn"
				@click="jumpPage">写文章</el-button>

		</div>

		<div class="article-body-box">
			<div class="poetrybox" v-for="(blog,index) in blogList" :key="index">
				<h2 class="article-title-h" v-on:click="jumpToTheDetailsPage(blog.ID)" v-html="blog.title">
					{{blog.title}}</h2>
				<span class="article-author-span" v-on:click="jumpToPersonalBlogListPage(blog.userInformationId.ID)">
					<el-tooltip :content="blog.userInformationId.nickName" placement="top">
				  <el-avatar :src="blog.userInformationId.avatarLink"></el-avatar>
					</el-tooltip>
				</span>
				<hr class="article-hr">
				<div class="article-content-span">
					<h3 class="article-content-h" v-html="blog.content">{{blog.content}}</h3>
				</div>
				<span class="release-time">{{blog.updateTime}}</span>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		devArticleManagementUrl
	} from '@/api/apiconst'

	export default {
		name: "BlogList",
		data() {
			return {
				input: "",
				blogList: [],
				// 设置一个开关来避免重复请求数据
				scroll: true,
				// 当前页数
				page: 1,
				size: 10,
				// 总页数
				total: 0,

			}
		},

		mounted() {
			//加载博客数据
			this.loadBlogListData("");

			console.log("window", window)


		},
		methods: {
			jumpToPersonalBlogListPage(userId) {
				//跳转到个人博客列表页面
				this.$router.push({
					path: "/personalBlogDetails",
					query: {
						userId: userId,
					}
				});

			},
			jumpPage() {
				//跳转到写文章界面界面
				this.$router.push({
					path: "/releaseBlog"
				});
			} //返回主页
			,
			callBackhome() {
				//跳转到主界面
				this.$router.push({
					path: "/home"
				});
			},
			//加载博客列表的数据
			loadBlogListData(searchTitle) {
				console.log("当前页码为", this.page)
				this.$axios({
					method: 'POST',
					url: '/article/queryArticleList',
					baseURL: devArticleManagementUrl,
					data: {
						page: this.page,
						size: this.size,
						title: searchTitle
					}
				}).then(
					response => {
						if (response.data.code == 200) {
							console.log("本次的数据", response.data.data.searchList)
							// 根据当前页面数是否为1来进行判断，同时将请求的列表装在定义的控制符串里
							if (this.page === 1) {
								this.blogList = response.data.data.searchList;
								// 获取总页数
								this.total = response.data.data.pageCount;
								console.log("total", this.total)
							} else {
								// 将之前请求的数据以及后面请求回来的数据装到一个数组里面（拓展运算符）
								this.blogList = [
									...this.blogList,
									...response.data.data.searchList
								]
							}
							// 当前页数累加
							++this.page;

						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);

			},
			searchBlog() {
				this.page = 1
				this.size = 10
				this.total = 0
				this.loadBlogListData(this.input);
			},
			listenerFunction(e) {
				// 添加事件句柄
				document.addEventListener('scroll', this.handleScroll, true);

			},
			handleScroll() {

				// 是否滚动到底部的判断
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
				let clientHeight = document.documentElement.clientHeight;
				let scrollHeight = document.documentElement.scrollHeight;


				if (scrollTop + clientHeight == scrollHeight) {

					// 是否调用请求方法判断
					if (this.$data.page > this.$data.total) {
						console.log("已经是到底了，没得数据了");
						return;
					} else {
						console.log("开始调用")
						this.loadBlogListData(this.input)

					}
				}
			},
			//跳转到文章详情页
			jumpToTheDetailsPage(blogId) {
				console.log("博客ID", blogId);
				//跳转到博客详情页
				this.$router.push({
					path: '/blogDetails',
					query: {
						blogId: blogId,
					}
				});

			}



		},
		beforeDestroy() {
			// 移除通过addEventListener()方法添加的事件句柄
			document.removeEventListener("scroll", this.listenerFunction);
		},
		created() {
			this.listenerFunction();



		}

	}
</script>

<style scoped>
	.call-back-icon-box {
	    width: 3%;
	    height: 5%;
	    top: 47%;
	    left: 9%;
	    position: fixed;
	    color: white;
	    font-size: 34px;
	}

	.blog-list-body-box {
		background: url("@/assets/images/blog-list-map.jpeg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;
		overflow: auto;
		height: 100%;
		width: 100%;
		min-height: 100vh;
	}




	.blog-list-body-box .article-body-box {
		height: 85%;
	}

	.blog-list-body-box .article-body-box .poetrybox {
		background-color: rgba(0, 0, 0, 0.5);
		width: 60%;
		height: 20%;
		border-radius: 110px;
		border: 2px solid #a1a1a1;
		margin-left: 20%;
		margin-top: 2%;
	}

	.blog-list-body-box .article-body-box .poetrybox:nth-child(1) {
		margin-top: 8%;
	}

	.blog-list-body-box .search-box {
		width: 50%;
		top: 6%;
		left: 20%;
		position: fixed;
	}

	.blog-list-body-box .search-box .serarch-assembly {
		margin: 0 auto;
		margin-top: 20px;
	}

	.blog-list-body-box .search-box .search-input {
		width: 85%;
	}

	.blog-list-body-box .search-box .search-btn {
		position: absolute;
		right: 4%;
		top: 0%;
	}

	.blog-list-body-box .search-box .writ-an-article-btn {
		position: absolute;
		right: -9%;
		top: 0%;
	}

	.blog-list-body-box .poetrybox .article-title-h {
		color: white;
		font-size: 18px;
		margin-left: 25px;


	}

	.blog-list-body-box .poetrybox .article-content-span {
		width: 80%;
		height: 45%;
	}

	.blog-list-body-box .poetrybox .article-content-span .article-content-h {
		color: white;
		font-size: 18px;
		margin-left: 25px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.blog-list-body-box .poetrybox .article-author-span {
		margin-left: 92%;
		color: white;
		font-size: 13px;
	}

	.blog-list-body-box .poetrybox .article-hr {
		width: 64%;
		margin-left: 10px;
		margin-top: -38px;
	}

	.blog-list-body-box .poetrybox .release-time {
		color: white;
		margin-left: 80%;

	}
</style>
